---
title: "MRSE"
output: 
  flexdashboard::flex_dashboard:
    logo: logo.png
    favicon: imagen1.png
    theme:
      version: 4
      bootswatch: cerulean
    storyboard: true
    social: menu
    source: embed
    orientation: columns
editor_options: 
  chunk_output_type: console
---

```{r setup, include=FALSE}
library(flexdashboard)
library(highcharter)
library(tidyverse)
library(xts)
library(plotly)
library(ggthemes)
library(lubridate)
library(vembedr)
library(leaflet)
library(sf)
```


Presentación {data-icon="fa-droplet"}
===

Column {data-width=200}
---
<center>
<!-- ![](https://cdn.www.gob.pe/uploads/campaign/photo/000/001/008/Logo-EALV-sin-fondo.png){width="200"} -->
![](mrse_logo.png){width="85%"}

</center>

### <span style="color:darkblue;font-weight:bold;">Bienvenida a esta plataforma de acceso público</span>

***MRSE-H de la EPS Ilo S.A.***

> EPS Ilo S.A. realiza implementación del Plan de Intervención los MRSE en la Comunidad Campesina de Asana con la finalidad de conservación y recuperación de los Servicios Ecosistémicos Hídricos.

***Equipo MRSE***
<br><br>
<center>

```{r}
embed_youtube("FqETSuNF4ks", height = 215, width = NULL,allowfullscreen = TRUE)
```
</center>

Column {.tabset data-width="500" .tabset-fade}
---

### <span style="color:darkblue;font-weight:bold;">NOSOTROS</span>

<div class="contenedor-imagen">
  <img src="fondo2.jpg" alt="Imagen 1">
  <img src="fondo3.jpg" alt="Imagen 2">
  <img src="fondo4.jpg" alt="Imagen 3">
</div>

<!-- Agrega botones para avanzar y retroceder -->
<button id="anterior">Anterior</button>
<button id="siguiente">Siguiente</button>

<style>
        /* Estilos para el contenedor de la transición */
        .contenedor-imagen {
            width: 100%;
            height: 620px;
            position: relative;
            overflow: hidden;
        }

        /* Estilos para las imágenes */
        .contenedor-imagen img {
            width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        /* Estilo para mostrar la primera imagen */
        .contenedor-imagen img:first-child {
            opacity: 1;
        }

        /* Estilo para las imágenes anteriores */
        .image-previous {
            opacity: 0.5;
            left: -100%;
        }

        /* Estilos para los botones */
        button {
    margin: 0;
    padding: 10px 20px; /* Aumentamos el padding para un aspecto más moderno */
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo con transparencia */
    color: #fff; /* Color de texto blanco */
    border: none;
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s, color 0.3s; /* Efecto de transición */
    outline: none; /* Quitamos el borde al hacer clic */
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Cambio de color al pasar el mouse */
}

        #anterior {
            left: 10px; /* Ajusta la posición horizontal del botón "Anterior" */
        }

        #siguiente {
            right: 10px; /* Ajusta la posición horizontal del botón "Siguiente" */
        }
    </style>

<script>
var currentImage = 0;
var images = document.querySelectorAll('.contenedor-imagen img');
var anteriorButton = document.getElementById('anterior');
var siguienteButton = document.getElementById('siguiente');

// Función para avanzar a la siguiente imagen
function avanzar() {
  images[currentImage].classList.add('image-previous');
  images[currentImage].style.opacity = 0;
  currentImage = (currentImage + 1) % images.length;
  images[currentImage].style.opacity = 1;
  images[currentImage].classList.remove('image-previous');
}

// Función para retroceder a la imagen anterior
function retroceder() {
  images[currentImage].classList.add('image-previous');
  images[currentImage].style.opacity = 0;
  currentImage = (currentImage - 1 + images.length) % images.length;
  images[currentImage].style.opacity = 1;
  images[currentImage].classList.remove('image-previous');
}

// Manejadores de clic para los botones
anteriorButton.addEventListener('click', retroceder);
siguienteButton.addEventListener('click', avanzar);

// Cambia la imagen automáticamente cada 6 segundos
setInterval(avanzar, 6000);
</script>

<center>
> Puedes comunicarte con nosotros a través del correo: mrse.epsilo@gmail.com
</center>

### <span style="color:darkblue;font-weight:bold;">MAPA WEB</span>

![](felt.png)

### <span style="color:darkblue;font-weight:bold;">DIAPOSITIVAS</span>

```{r}
xaringanExtra::embed_xaringan("m2/pres.html")
```


Precipitación {data-icon="fa-chart-simple"}
===

## Column {data-width="600"}

### <span style="color:darkblue;font-weight:bold;">GRÁFICO DE CALENDARIO</span>


```{r}
# Carga de las bases de datos:
df0 <- read.csv("mayo.csv")[1:6584,-1]

df1 <- read.csv("setiembre.csv",skip = 1)[,-1]
names(df1) <- c("fecha","Precipitacion")

df0 <- df0 %>% 
  mutate(fecha= as.POSIXct(
    paste(fecha,hora,sep=" "),
    format="%Y-%m-%d %H:%M")) %>% 
  select(fecha,Precipitacion)

df1$fecha <- as.POSIXct(
  df1$fecha,format = "%y/%m/%d %H:%M")
# Data completa:
df <- rbind(df0,df1)

# Datos diarios:

df3 <- df %>% mutate(
  fecha = as.Date(fecha, format="%Y-%m-%d"),
  fecha1 = format(fecha, format = "%Y-%m"),
  fecha2 = format(fecha, format = "%m"),
  fecha3 = format(fecha, format= "%d")) %>% 
  group_by(fecha,fecha1,fecha2,fecha3) %>% 
  summarise(Precipitacion= sum(Precipitacion,na.rm=F)) %>% 
  ungroup()

# Gráfico de barras para facetas:
m2 <- df3 %>% ggplot(aes(x=fecha3,y=Precipitacion))+
  geom_bar(stat="identity",fill="turquoise")+
  labs(x="Fecha",y="Precipitación (mm)") + 
  theme_minimal() + theme(plot.title = element_text(size = 14,
    face = "bold", hjust = 0.5),
    plot.subtitle = element_text(size = 12,
    face = "italic", hjust = 0.5),
    legend.position = "none",
    strip.text.x = element_text(colour = "white",face = "bold",
                                family = "helvetica"),
    strip.background = element_rect(
     color="#3182BD", fill="#3182BD",
     size=1.5, linetype="solid"),
    axis.title = element_text(size = 7),
    axis.text.x = element_text(size = 7,
        angle = 90)) +
  facet_wrap(~fecha1,ncol=1)

# gráfico ggplot para cajas:
a1 <- df3 %>% ggplot(aes(x=fecha2,y=Precipitacion))+
  geom_boxplot(color="darkblue",fill="transparent",outlier.shape = NA)+
  labs(x = "Meses",color="Meses",fill="Meses",y="Precipitación (mm)")+
  geom_jitter(size=1.8,alpha=0.4,color="#3182BD",width = 0.15) +
  theme(legend.position = "none")+
  theme_minimal()


####### Calendario

dat_pr <- df3[,c(1,5)]
  names(dat_pr) <- c("date","pr")
  
  dat_pr <- dat_pr %>% 
    complete(date = seq(ymd("2023-02-01"), 
                        ymd("2023-07-31"),"day")) %>%
    mutate(weekday = wday(date, label = T, week_start = 1,
                          locale = Sys.getlocale("LC_TIME")), 
           month = month(date, label = T, abbr = F),
           week = isoweek(date),
           day = day(date))


  dat_pr <- mutate(dat_pr, 
                   week = case_when(month == "December" & week == 1 ~ 53,
                                    month == "January" & week %in% 52:53 ~ 0,
                                    TRUE ~ week))

  
# color ramp
pubu <- RColorBrewer::brewer.pal(9, "PuBu")
col_p <- colorRampPalette(pubu)  
  
# Configuración del tema
theme_calendar <- function(){
    theme(aspect.ratio = 1/2,
          axis.title = element_blank(),
          axis.ticks = element_blank(),
          axis.text.y = element_blank(),
          axis.text = element_text(
            family = "Montserrat"),
          panel.grid = element_blank(),
          panel.background = element_blank(),
          strip.background = element_blank(),
          strip.text = element_text(
            family = "Montserrat", face = "bold", size = 15),
          legend.position = "top",
          legend.text = element_text(
            family = "Montserrat", hjust = .5),
          legend.title = element_text(
            family = "Montserrat", size = 9, hjust = 1),
          plot.caption =  element_text(
            family = "Montserrat", hjust = 1, size = 8),
          panel.border = element_rect(
            colour = "grey", fill=NA, size=1),
          plot.title = element_text(
            family = "Montserrat", hjust = .5, size = 22,
            face = "bold",margin = margin(
              0,0,0.5,0, unit = "cm")),
          plot.subtitle = element_text(
            family = "Montserrat", hjust = .5, size = 16)
    )
  }
  
# Cambiando las etiquetas de los dias de la semana:
dat_pr$weekday <- factor(
  dat_pr$weekday,
  labels = c("lun\\."="l",
             "mar\\."= "m",
             "mié\\."="mi","jue\\." ="j",
             "vie\\."="v","sáb\\."="s",
             "dom\\."="d"))

n <-   ggplot(dat_pr, 
         aes(weekday, -week, fill = pr)) +
    geom_tile(colour = "transparent",
              size = .4)  + 
    geom_text(aes(label = day),
              size = 1.4, color = "black") +
  scale_fill_gradient(low = "white",
                      high = "#3182BD",na.value = "white")+
  facet_wrap(~ month, nrow = 4,
             ncol = 3, scales = "free") +
  labs(title = "¿Cuánto ha llovido?",
       subtitle = "Precipitación Mensual",
       fill = "Precipitación (mm)") +
  theme_calendar()

ggplotly(n) 
```

### <span style="color:darkblue;font-weight:bold;">DATOS CRUDOS (DESCARGA)</span>

```{r}
data <- df[,c(1,2)]
data$fecha <- as.numeric(data$fecha)*1000-(5*3600*1000)

highchart(type = "stock") %>%
  hc_title(text = "Estación Asana (Datos crudos)") %>%
  hc_xAxis(type = "datetime") %>%
  hc_add_series(data = data, type = "column",
                hcaes(x = fecha, y = Precipitacion),
                name = "Precipitacion", color = "#3182BD") %>%
  hc_exporting(
    enabled = TRUE,
    buttons = list(
      contextButton = list(
        menuItems = c("downloadPNG",
                      "downloadPDF",
                      "separator",
                      "downloadCSV",
                      "downloadXLS",
                      "separator",
                      "resetZoom")
      )
    )
  ) %>% 
  hc_xAxis(type = "datetime", showLastLabel = TRUE,
           dateTimeLabelFormats = list(month = "%B")) %>% 
  hc_tooltip(shared = TRUE, useHTML = TRUE) %>% 
  hc_chart(zoomType = "x")
```



## Column {data-width="350"}

### <span style="color:darkblue;font-weight:bold;">GRÁFICO DE BARRAS</span>

```{r}
ggplotly(p=m2)
```

## Column {data-width="350"}

### Precipitación acumulada
```{r}
valueBox(paste0(sum(df$Precipitacion, na.rm=T)," milímetros"), icon = "fa-droplet")
```

### Inicio de registro

```{r}
valueBox(min(df$fecha), icon = "fa-pencil")
```

### Último registro

```{r}
valueBox(max(df$fecha), icon = "fa-pencil")
```

### <span style="color:darkblue;font-weight:bold;">INTERVENCIONES</span>

<iframe width="100%" height="450" frameborder="0" title="Felt Map" src="https://felt.com/embed/map/MRSE-H-YL2D8IAiQoucf0SETYCFBC?loc=-17.04095,-70.48828,12.2z"></iframe>

Datos futuros {data-icon="fa-chart-simple"}
===

## Column {data-width="600"}

### <span style="color:darkblue;font-weight:bold;">GRÁFICO DE DATOS DIARIOS</span>

```{r}
data <- read.csv("simulados.csv")
data$fecha_hora <- as.POSIXct(
  data$fecha_hora,format="%Y-%m-%d %H:%M")

pp <- data %>% mutate(
  fecha_hora = as.Date(
    fecha_hora, format = "%Y-%m-%d")) %>% 
  group_by(fecha_hora) %>% 
  summarise(precipitacion = sum(precipitacion, na.rm = T)) %>% 
  select(fecha_hora, precipitacion)

s <- data %>% mutate(
  fecha_hora = as.Date(
    fecha_hora, format = "%Y-%m-%d")) %>% 
  group_by(fecha_hora) %>% 
  summarise_if(is.numeric,.funs = mean)

s$precipitacion <- pp$precipitacion

highchart() %>%
  hc_title(text = "Estación Asana (Datos diarios)") %>%
  hc_xAxis(type = "datetime") %>%
  hc_add_series(data = s, type = "line",
                hcaes(x = fecha_hora, y = precipitacion),
                name = "Precipitacion", color = "#3182BD") %>%
  hc_add_series(data = s, type = "line",
                hcaes(x = fecha_hora, y = temperatura),
                name = "Temperatura", color = "hotpink") %>%
  hc_add_series(data = s, type = "line",
                hcaes(x = fecha_hora, y = humedad),
                name = "Humedad", color = "turquoise") %>%
  hc_exporting(
    enabled = TRUE,
    buttons = list(
      contextButton = list(
        menuItems = c("downloadPNG",
                      "downloadPDF",
                      "downloadCSV",
                      "downloadXLS")
      )
    )
  ) %>% 
  hc_xAxis(type = "datetime", showLastLabel = TRUE,
           dateTimeLabelFormats = list(month = "%B")) %>% 
  hc_tooltip(shared = TRUE, useHTML = TRUE) %>% 
  hc_chart(zoomType = "x")
```

## Column {data-width="200"}

### Precipitación acumulada total

```{r}
valueBox(paste0(sum(df$Precipitacion, na.rm=T)," milímetros"), icon = "fa-droplet")

```

### Temperatura media

```{r}
valueBox(paste0(round(mean(s$temperatura, na.rm=T),2),"°C"), icon = "fa-temperature-empty",color = "hotpink")
```

### Humedad Relativa media

```{r}
valueBox(paste0(round(mean(s$humedad, na.rm=T),2)," %"),
         icon = "fa-cloud",color = "turquoise")
```

### Rango de mediciones

```{r}
valueBox(paste(min(df$fecha),max(df$fecha),sep=" al ") , icon = "fa-pencil")
```

### Mapa web

```{r eval=FALSE}
embed_url("https://e.notionhero.io/e1/p/57d29dc-31d5fc890fede99023a3b883131fce2")
```


Noticias {.storyboard data-icon="fa-newspaper"}
===
  
### EL INICIO DE LA IMPLEMENTACIÓN

![](TIME_LINE/F1.png)

### SUPERVISIÓN DE ZANJAS DE INFILTRACIÓN

![](TIME_LINE/F1.1.png)

### VERIFICACIÓN DE INSTALACIÓN DE PLUVIÓMETRO

![](TIME_LINE/F2.png)

### PARTICIPACIÓN EN PLATAFORMA DE BUENA GOBERNANZA

![](TIME_LINE/F3.png)

### APROBACIÓN DEL ACUERDO MERESE ANTE EL MINAM

![](TIME_LINE/F4.png)